<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-justify-content</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
      /*控制容器内多行在交叉轴上的排列方式*/
        .flex-container {
            display:flex;
            width: 150px;
            height: 250px;
            flex-wrap: wrap;
            /*align-content: 1flex-start;*/
            /*align-content: 1flex-end;*/
            align-content: center;
            /*align-content: stretch;*/
            /*align-content: space-between;*/
            /*align-content: space-around;*/
            /*align-content: space-evenly;*/
        }
        .flex-item {
            margin:5px;
        }

    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item red">小乔</div>
        <div class="flex-item red">虞姬</div>
        <div class="flex-item red">白起</div>
        <div class="flex-item red">诸葛亮</div>
        <div class="flex-item red">韩信</div>
        <div class="flex-item red">赵云</div>
        <div class="flex-item red">安琪拉</div>
        <div class="flex-item red">娜可露露</div>
    </div>
</body>
</html>
